<script>
import PaymentWayTag from '@/views/advance/components/paymentWayTag.vue'
import { exportAdvanceExcel, getOrderZdOne, getZdOne } from '@/api/goods'
import { moneyFormat } from '@/utils'

export default {
  name: 'mxTable',
  components: { PaymentWayTag },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      default: 'mx'
    },
    conditions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      popShow: false,
      activeDh: '',
      detail: {}
    }
  },
  computed: {
    chmx() {
      return this.detail.chmxList || []
    }
  },
  methods: {
    moneyFormat,
    viewDetail(item) {
      this.popShow = true
      this.activeDh = item.dh

      if(this.type === 'mx') {
        getZdOne(item.dh).then(res => {
          this.detail = res.data || {}
        })
      }
      if(this.type === 'orderMx') {
        getOrderZdOne(item.dh).then(res => {
          this.detail = res.data || {}
        })
      }


    },
    exportExcel() {
      this.$buryingPoint(`高级查询-导出明细excel-${this.type}`, {
        queryConditions: this.conditions
      })
      exportAdvanceExcel(this.conditions, this.type).then(res =>{
        // window.open(res.msg)
        this.$http.get(res.msg, {
          responseType: 'blob'
        })
      }).catch(err => {
        this.$message.error('导出失败')
      })
    }
  }
}
</script>

<template>
  <div class="table-data-wrapper">
    <div class="statistic" v-if="tableData.length">共导出{{ tableData.length }}条数据，<el-button type="text" size="mini" @click="exportExcel">导出excel</el-button></div>
    <div class="table-data" :class="{active: item.dh === activeDh}" v-for="(item,index) in tableData" :key="index"
         @click="viewDetail(item)"
    >
      <div class="title">
        <span>单号：{{ item.dh }}</span>
        <span>{{ item.rq }}</span>
      </div>
      <div class="content">
        <span>{{ item.khbh }} {{ item.khname }}</span>
        <span>单价{{ moneyFormat(item.jg) }}</span>
      </div>
      <div class="content">
        <span>{{ item.spbh }} {{ item.spname }}</span>
        <span>{{ item.js === 0 ? `${item.xs}${item.dw2}` : `${item.js}${item.dw}` }}</span>
      </div>
    </div>
    <van-popup v-model="popShow" position="bottom" :style="{ height: '40%' }">
      <div class="header">对应账单明细</div>
      <div class="scroll-wrapper">
        <div class="zd-detail">
          <div class="zd-detail-label">客户</div>
          <div class="zd-detail-value" style="width: calc(100% - 60px);">{{ detail.khbh + ' ' + detail.khname }}</div>
          <div class="zd-detail-label">单号</div>
          <div class="zd-detail-value">{{ detail.dh }}</div>
          <div class="zd-detail-label">日期</div>
          <div class="zd-detail-value">{{ detail.rq }}</div>
          <div class="zd-detail-label">司机</div>
          <div class="zd-detail-value" style="min-width: 30px;">{{ detail.carman }}</div>
          <div class="zd-detail-label">金额</div>
          <div class="zd-detail-value">{{ detail.je }}</div>
          <div class="zd-detail-label">付款方式</div>
          <div class="zd-detail-value"><PaymentWayTag :type="detail.fkfs" /></div>
        </div>
        <div class="chmx-list">
          <div class="chmx-item" v-for="(item,index) in chmx" :key="index">
            <div class="item-label">商品编号</div>
            <div class="item-value">{{ item.spbh }}</div>
            <div class="item-label">商品名称</div>
            <div class="item-value text-ellipsis" style="width: 40%;">{{ item.spname }}</div>
            <div class="item-label">数量</div>
            <div class="item-value">{{ item.xs === 0 ? `${item.js}${item.dw}` : `${item.xs}${item.dw2}` }}</div>
            <div class="item-label">单价</div>
            <div class="item-value">{{ item.jg }}</div>
            <div class="item-label">进价</div>
            <div class="item-value">{{ item.jj }}</div>
            <div class="item-label">金额</div>
            <div class="item-value">{{ item.je }}</div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<style scoped lang="scss">
.table-data-wrapper {
  padding: 5px 8px;
  .statistic {
    width: 100%;
    text-align: center;
    font-size: 0.8rem;
    color: #999999;
    margin-bottom: 10px;
  }

  .table-data {
    border: 1px solid #EBEEF5;
    border-radius: 4px;
    box-shadow: 0 4px 8px #ebedf0;
    padding: 5px;
    font-size: 12px;
    margin-bottom: 10px;

    &.active {
      border-color: #0066CC;
    }

    .title {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }

    .content {
      width: 100%;
      display: flex;
      justify-content: space-between;
      line-height: 25px;
    }
  }
}

.header {
  padding: 10px;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #efefef;
}

.scroll-wrapper {
  height: calc(100% - 40px);
  overflow-y: auto;
}

.zd-detail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.8rem;
  padding: 10px;
  .zd-detail-label {
    color: #999999;
    margin-right: 8px;
  }
  .zd-detail-value {
    margin-right: 10px;
  }
}

.chmx-list {
  padding: 10px;

  .chmx-item {
    border: 1px solid #efefef;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    box-shadow: 0 4px 8px #ebedf0;

    .item-label {
      font-size: 0.8rem;
      color: #999999;
    }

    .item-value {
      margin-left: 10px;
      font-size: 0.8rem;
      margin-right: 20px;

      &.text-ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
